<template>
  <div class="setting-panel">
    <div class="tab-box">
      <a-tabs v-model:active-key="activeKey" type="card">
        <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.name">
          <component :is="components[tab.key as keyof typeof components]" />
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref, shallowRef } from 'vue';
import Appearance from './Appearance.vue';
import Layout from './Layout.vue';
import Common from './Common.vue';
type TabItem = {
  name: string;
  key: string;
}
const activeKey = ref<string>('appearance')
const tabs = ref<TabItem[]>([
  {name : '外观' , key : 'appearance'},
  {name : '布局' , key : 'layout'},
  {name : '通用' , key : 'common'}
]);
const components = ref({
  appearance : shallowRef(Appearance),
  layout : shallowRef(Layout),
  common : shallowRef(Common)
})
</script>

<style lang='less' scoped>
.setting-panel {
  width: 100%;
  height: 100%;
  .tab-box {
    width: 100%;
    height: 100%;
    :deep(.ant-tabs) {
      width: 100%;
      height: 100%;
      .ant-tabs-content-holder {
        overflow: auto;
      }
    }
  }
}
</style>